<template>
<div id="print">
        <!--后退-->
        <div class="header">
             <img class="back" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
             <p><img src="../../assets/tabber/printNext.png" alt=""><span @click="printGu">打印指南</span></p>
        </div>
       

        <div class="printList">
            <p class="rubbit"><img src="../../assets/tabber/rubb.png" alt=""></p>
            <section class="fileList">
                <el-upload
                    class="upload-demo"
                    action="http://192.168.3.219:8080/file"
                    :on-success="handleAvatarSuccess"
                    :limit="1"
                    :before-upload="beforeAvatarUpload"
                    :file-list="fileList">
                    <p class="btn" v-if="upFile==''"><img src="../../assets/tabber/addImg.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='docx'"><img src="../../assets/tabber/word1.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='pptx'"><img src="../../assets/tabber/ppt.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='pdf'"><img src="../../assets/tabber/pdf.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='xlsx'"><img src="../../assets/tabber/file-xls.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='txt'"><img src="../../assets/tabber/txt.png" alt=""></p>
                    <p class="fileImg" v-if="upFile=='jpg'"><img src="../../assets/tabber/jpg.png" alt=""></p>
                </el-upload>
               
            </section>
            <p class="nextStep" @click="nextStep">下一步</p>
        </div>
</div>
</template>
<script>
export default {
  data() {
      return {
            fileList:[],
            fileName:'',
            upFile:'',
            fileUrl:'',
            fileData:{

            }
      };
    },
    methods: {
        beforeAvatarUpload(file){
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                 
                const extension = testmsg === 'docx'  
                const extension2 = testmsg === 'pptx'
                const extension3 = testmsg === 'pdf'  
                const extension4 = testmsg === 'txt'
                const extension5 = testmsg === 'xlsx'  
                const extension6 = testmsg === 'jpg'  
                const isLt2M = file.size / 1024 / 1024 < 10  
                if(!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6) {  
                    this.$messagebox({  
                        message: '上传文件只能是 docx、pptx、pdf、txt、xlsx、jpg格式!',  
                        type: 'warning'  
                    });  
                }  
                if(!isLt2M) {  
                    this.$messagebox({  
                        message: '上传文件大小不能超过 10MB!',  
                        type: 'warning'  
                    });  
                }  
            return extension || extension2 || extension3 || extension4 || extension5 || extension6 && isLt2M  
             
        },
        //打印指南
        printGu(){
            this.$router.push('/printGuide')
        },
        //下一步
        nextStep(){
            this.fileData.fileName=this.fileName
            this.fileData.upFile=this.upFile
            this.fileData.fileUrl=this.fileUrl
            this.$router.push({
                path: '/printCom',
                name: 'printCom', 
                query: {
                    name: 'printCom',
                    data:this.fileData,
                }
            })
        },
        handleAvatarSuccess(res, file) {
            this.fileName=res.data.name
             //切割数组取后面一个元素
            this.upFile=res.data.file.split('.').pop()
            this.fileUrl=res.data.file
        },
        
    }
}
</script>
<style>
#print{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/printbg.png);
}
#print .header{
    width:93%;
    margin:auto;
    padding:1rem 0 2rem;
    display:flex;

    justify-content:space-between;
}
#print .header .back{
    height:1.2rem;
    width:0.675rem;
}
#print .header > p >img{
    height:1.2rem;
}
#print .header > p > span{
    color:#fff;
    font-size:0.8rem;
    padding:0.3rem;
    border-bottom:1px solid #fff;
}
#print .printList{
    width:93%;
    border-radius:0.8rem;
    margin:auto;
    background:#fff;
    padding:1rem;
    box-shadow:1px 1px 5px 1px #e2e2e2;
}
#print .printList .rubbit{
    text-align:center;
}
#print .printList .rubbit > img{
    height:5rem;
    margin-top:-2rem;
}
#print .printList .fileList{
    height:20vh;
    width:100%;
    background:#f6f6f6;
    margin:1rem 0 5rem;
}
#print .printList .nextStep{
    width:40%;
    text-align:center;
    margin:auto;
    height:2.5rem;
    line-height:2.5rem;
    background:#29a193;
    color:#fff;
    border-radius:0.3rem;
}
#print .upload-demo{
    height:20vh;
    width:100%;
}
#print .upload-demo .el-upload{
    height:20vh;
    width:100%;
}
#print .upload-demo .el-upload .el-upload--text{
    height:20vh;
    width:100%;
}
#print .btn{
    height:20vh;
    width:100%;
    line-height:20vh;
    text-align:center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
#print .btn > img{
    height:10vh;
}
#print .fileImg{
    height:20vh;
    width:100%;
    line-height:20vh;
    text-align:center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
#print .fileImg > img{
    height:10vh;
}
</style>